<template>
  <div>姓名：{{ stu.name }}</div>
  <div>年龄：{{ stu.age }}</div>
  <Student :students="list"/>
  <button @click="update">修改</button>
  <Child :onChildClick="childClick"/>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { type Person } from '@/types/Person'
  import Child from '@/components/Child.vue'
  let stu = reactive<Person>({
    name: '张三',
    age: 18,
  })
  let list = reactive<Person[]>([
    {name: '张三', age: 18},
    {name: '李四', age: 18},
    {name: '王五', age: 18},
  ])
  const update = () => {
    Object.assign(stu, {
      name: '李四',
      age: 20
    })
  }
  const childClick = (msg:string) => {
    console.log('从子组件收到参数:',msg)
  }
</script>

<style>
</style>